<template>
  <div class="overview-content">
    <!---->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
            <div class="divUl">
                 <el-button class="myBnt" @click="show = true">人工添加</el-button>
                <ul class="flex-row ulMy">
                    <!-- <li v-for="(item,index) in arr" :key="index" :class="active==index?'active':''" @click="tab(index)">{{ item }}</li> -->        
                                <li>
                                        <i>2020/10/12 15:35</i>
                                        <div>
                                            <h5>VincentZhang</h5>
                                            <p>发送了例行检查报告</p>
                                        </div>
                                </li>
                                <li>
                                        <i>2020/10/12 15:35</i>
                                        <div>
                                            <h5>VincentZhang</h5>
                                            <p>发送了例行检查报告</p>
                                        </div>
                                </li>
                                <li>
                                        <i>2020/10/12 15:35</i>
                                        <div>
                                            <h5>VincentZhang</h5>
                                            <p>发送了例行检查报告</p>
                                            <dfn>业主聊天截图.png</dfn>
                                        </div>
                                </li>
                                <li>
                                        <i>2020/10/12 15:35</i>
                                        <div>
                                            <h5>VincentZhang</h5>
                                            <p>发送了例行检查报告</p>
                                        </div>
                                </li>
                                <li>
                                        <i>2020/10/12 15:35</i>
                                        <div>
                                            <h5>VincentZhang<em>@JessicaWu</em></h5>
                                            <p>发送了例行检查报告</p>
                                        </div>
                                </li>
                                <li class="not">
                                        <i>2020/10/12 15:35</i>
                                        <div>
                                            <h5>系统</h5>
                                            <p>发送了例行检查报告</p>
                                        </div>
                                </li>
                </ul>
            </div>
        </div>
      </el-col>
    </el-row>

        <!---->
    <el-dialog title="" width="770px" custom-class="myDigo inputTop" :show-close="false" :visible.sync="show">
      <h2>添加记录 <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div>
        <el-form ref="form" :model="sizeForm" label-width="85px" class="formDiv">
          <el-form-item label="记录内容:" :required="true">
                <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="textarea"
                    maxlength="30"
                    show-word-limit
                    >
                    </el-input>
          </el-form-item>
          <el-form-item label="附件:" :required="true">
              <el-upload
                    class="upload-demo"
                    drag
                    action="https://jsonplaceholder.typicode.com/posts/"
                    multiple>
                    <br>
                    <i class="el-icon-folder fileWD"></i>
                    <div class="el-upload__text divSE">
                        <em>将文件拖到此处，或点击上传</em>
                        <span class="txtUpo">支持上传：PDF、视频(mp4)、图片(jpg / png / jpeg)</span>
                    </div>
                    </el-upload>
          </el-form-item>
          <el-form-item label="提醒:" :required="true">
                <el-checkbox-group v-model="checkList">
                    <el-checkbox label="1">Vincent</el-checkbox>
                    <el-checkbox label="2">Vincent</el-checkbox>
                    <el-checkbox label="3">Vincent</el-checkbox>
                    <el-checkbox label="4">Vincent</el-checkbox>
                    <el-checkbox label="5">Vincent</el-checkbox>
                    <el-checkbox label="5">Vincent</el-checkbox>
                    <el-checkbox label="1">Vincent</el-checkbox>
                    <el-checkbox label="2">Vincent</el-checkbox>
                    <el-checkbox label="3">Vincent</el-checkbox>
                    <el-checkbox label="4">Vincent</el-checkbox>
                    <el-checkbox label="5">Vincent</el-checkbox>
                    <el-checkbox label="5">Vincent</el-checkbox>
                    <el-checkbox label="1">Vincent</el-checkbox>
                    <el-checkbox label="2">Vincent</el-checkbox>
                    <el-checkbox label="3">Vincent</el-checkbox>
                    <el-checkbox label="4">Vincent</el-checkbox>
                    <el-checkbox label="5">Vincent</el-checkbox>
                    <el-checkbox label="5">Vincent</el-checkbox>
                </el-checkbox-group>
          </el-form-item>
          <!---->
          <!---->
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save()">确 认</el-button>
        <el-button class="grey-btn" @click="show = false">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
    <!---->
  </div>
</template>

<script>

export default {
  components: {
  },
  data() {
    return {
      active: 0,
      show:false,
      textarea: '',
      checkList: ['1','2']
    }
  },
  methods: {
    tab(v) {
      this.active = v
    },
    save(){
        this.show = false
    },
    close(){
        this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.myBnt{color: #5AC6B7;display: block;width: 100px;margin-left: 115px;margin-bottom: 20px;border: 0;}
.divUl{width: 854px;margin: 20px auto 0 auto;}
h5,p{padding: 0;margin: 0;}
.ulMy{flex-wrap: wrap;}
.ulMy li{width: 100%;display: flex;align-items: center;margin-bottom: 15px;}
.ulMy li i{color: #6a6a6a;font-size: 13px;align-self: self-start;margin-top: 23px;}
.ulMy li p{color: #6a6a6a;font-size: 13px;}
.ulMy li h5{font-size: 16px;color: #151515;margin-bottom: 10px;}
.ulMy li div{background: #fff;margin-left: 15px;flex: 1;padding: 20px;box-sizing: border-box;border-radius: 2px;}
.ulMy li em{color: #5AC6B7;margin-left: 3px;}
.ulMy li dfn{color: #5AC6B7;margin-top: 3px;font-size: 12px;display: block;margin-top: 10px;}
.ulMy li.not{color: #ccc;}
.ulMy li.not h5{font-size: 16px;color: #ccc;margin-bottom: 10px;}
.ulMy li.not div{background: #fff;margin-left: 15px;flex: 1;padding: 20px;box-sizing: border-box;border-radius: 2px;}
.ulMy li.not p{color: #ccc;}
.overview-content{min-height: calc(100vh - 160px);background: #eee;}
.myDigo h2{background: #343436;}
::v-deep .myDigo .el-dialog__footer{background: #E5E9ED;padding-top: 15px;}
::v-deep .el-dialog.myDigo .el-dialog__body{padding: 0;}
::v-deep .el-dialog.myDigo .el-dialog__header{display: none;}
.el-dialog.myDigo h2{height: 58px;display: flex;justify-content: space-between;align-items: center;padding-left: 39px;padding-right: 39px;color: #fff;font-size: 18px; padding-top: 0;
    margin-top: 0;overflow: hidden;font-weight: normal;font-family: 'SourceHanSansSC-regular';}
.el-dialog.myDigo h2 i{font-size: 26px;cursor: pointer;}
::v-deep  .el-dialog.myDigo  .el-dialog__body{text-align: left;}
.formDiv{padding-left: 39px;padding-right: 39px;}
.divSE{text-align: center;}
.divSE em{display: block;}
.fileWD{font-size: 46px;color: #5AC6B7;}
</style>

